<template>
	<view class="staffList">
		<navBar isBack backColor="#fff" title="员工列表" color="#fff" background="transparent"></navBar>
		<view class="sL_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
			<!-- 全部员工 -->
			<view class="sL_nowRatio">
				{{staffList.length}}人
				<view class="sL_nowRatioItem">
					<image src="https://manager.ryz1620.com/static/distri/fenxiao/makerEli2.png" mode=""></image>
					全部员工
				</view>
			</view>
		</view>
		
		<!-- 员工列表 -->
		<view class="content_list" :style="'margin-top:'+navHeight+'rpx;'">
			<view class="list_item" v-for="(item,index) in staffList" :key="index">
				
				<view class="item_left">
					<checkbox-group name="" v-if="delStatus" @change="checkDel(index,item.checked)">
						<label>
							<checkbox :checked="item.checked"/>
						</label>
					</checkbox-group>
					<image :src="item.avatar.path?item.avatar.path:''" mode="" @tap="toStaffInfo(item.id)"></image>
					<view class="staffInfo" @tap="toStaffInfo(item.id)">
						{{item.name}}
						<span>{{item.phone}}</span>
					</view>
				</view>
				<view class="item_right">
					{{item.worksite_num}}个工地
				</view>
			</view>
		</view>
		<!-- 添加按钮 -->
		<view class="btn">
			<view class="delete" @tap="delBtn">
				<view class="removeImg">
					<i class="iconfont icon-shanchu" v-if="!delStatus"></i>
					<!-- <image src="https://manager.ryz1620.com/static/constr/delete.png" mode=""></image> -->
					<image src="https://manager.ryz1620.com/static/constr/back.png" mode="" v-else></image>
				</view>
				{{!delStatus?'删除':'取消'}}
			</view>
			<button type="default" @click="toAddStaff">{{!delStatus?'添加员工':'确认删除'}}</button>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue'
	import service_constr from '@/service/constr.js'
	export default{
		data(){
			return{
				staffList:[],
				delStatus:false, //删除按钮状态
				navHeight:150,
			}
		},
		onShow() {
			this.getStaffList()
		},
		onLoad(options) {
			this.navHeight = 352 - Number(this.$store.state.system.navBarHeight)*2
			this.getStaffList();
		},
		methods:{
			// 获取员工列表
			getStaffList(){
				let team_id = this.$store.state.index.sid;
				console.log(team_id)
				service_constr.getStaffList({team_id}).then(res=>{
					console.log(res)
					if(res.code==1){
						res.data.map(item=>{
							item.checked = false
						})
						this.staffList = res.data?res.data:[]
					}
				})
			},
			
			// 新增或删除员工
			toAddStaff(){
				let that = this
				if(this.delStatus){
					let delId=[]
					this.staffList.map(item=>{ //获取要删除的员工的id
						if(item.checked){
							delId.push(item.id)
						}
					})
					let id = delId.join(',');
					if(!id.length){
						uni.showToast({
							title:'请选择需要删除的员工',
							icon:'none'
						})
						return
					}else{
						uni.showModal({
						    title: '提示',
						    content: '确定要删除所选员工吗？',
						    success: function (res) {
						        if (res.confirm) {
						           service_constr.delStaff({id}).then(res=>{
										if(res.code==1){
											console.log(res)
											uni.showToast({
												title:'删除成功',
												icon:'success'
											})
											that.getStaffList()
										}else{
											uni.showToast({
												title:res.msg,
												icon:'none'
											})
										}
						           })
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}
					
				}else{
					uni.navigateTo({
						url:'./addStaff'
					})
				}
			},
			
			// check按钮
			checkDel(index,check){
				if(check){
					this.staffList[index].checked = false
				}else{
					this.staffList[index].checked = true
				}
			},
			
			// 员工信息
			toStaffInfo(id){
				uni.navigateTo({
					url:`./staffInfo?id=${id}`
				})
			},
			
			// 点击删除按钮
			delBtn(){
				if(this.delStatus){
					this.delStatus = false
				}else{
					this.delStatus = true
				}
				
			}
		}
	}
</script>

<style lang="scss">
	page{height: 100%;width: 100%;}
	.staffList{
		width: 100%;
		height: 100%;
		background-color: #fff;
		.sL_topImg{width: 100%;height: 352rpx;position: fixed;top: 0;left: 0;z-index: 2;image{width: 100%;height: 100%;}}
		
		// 当前比率
		.sL_nowRatio{
			position: absolute;
			bottom: 28rpx;
			left: 48rpx;
			z-index: 502;
			font: 500 60rpx/52rpx PingFang SC;
			color: #fff;
			.sL_nowRatioItem{
				margin-top: 20rpx;
				display: flex;
				font: 500 30rpx/40rpx PingFang SC;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}
		}
		
		// 员工列表
		.content_list{
			// height: 100%;
			background-color: #fff;
			// margin-top: 208rpx;
			margin-bottom: 102rpx;
			padding: 8rpx 0 0 32rpx;
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			.list_item{
				padding: 32rpx 32rpx 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F6F7FB;
				.item_left{
					checkbox{margin-right: 10rpx;}
					display: flex;
					align-items: center;
					image{width: 96rpx;height: 96rpx;border-radius: 50%;}
					.staffInfo{
						margin-left: 16rpx;
						display: flex;
						flex-direction: column;
						font: 400 28rpx/40rpx PingFang SC;
						color: #333333;
						span{font: 400 24rpx/34rpx PingFang SC; color:#939393;}
					}
				}
				.item_right{
					width: 206rpx;
					height: 80rpx;
					text-align: center;
					background-color: #F9F6F3;
					font: 400 24rpx/80rpx PingFang SC;
					color:#666666;
				}
			}
		}
		
		// 添加按钮
		.btn{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0 24rpx 0 34rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			.delete{
				.removeImg{display:flex;justify-content: center;i{color: #000;font-size: 28rpx;} margin-bottom: 14rpx;padding:12rpx;width: 48rpx;height: 48rpx;border-radius: 50%;background-color: #F5F5F5;}
				display: flex;
				flex-direction: column;
				align-items: center;
				image{width: 24rpx;height: 24rpx;}
				font: 400 18rpx/20rpx PingFang SC;
				color: #A0A0A0;
				margin: 10rpx 0;
			}
			button{
				// margin: 20rpx auto;
				width: 606rpx;
				height: 80rpx;
				background-color: #E7AD14;
				border-radius: 46rpx;
				font: 500 32rpx/80rpx PingFang SC;
				color: #fff;
				margin: 10rpx 0;
			}
		}
	}
</style>
